import { hot } from 'react-hot-loader/root';
import React from 'react';
import {
  BrowserRouter,
  Switch,
  Route,
} from 'react-router-dom';
import { Layout, ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
// mobx-react-lite基于react 的轻量级的状态管理
import { observer } from 'mobx-react-lite';
import { MainLayout } from '~/common/MainLayout';
import { routes } from '~/config/routes';
import { ProjectRoute } from './components/ProjectRoute';
import { userService } from '~/services/user';

const loginPage = routes.find((v) => v.path === '/login')!;
const listPage = routes.find((v) => v.path === '/login/more')!;
const detailsPage = routes.find((v) => v.path === '/login/more/details')!;
console.log('loginPage')
console.log(loginPage)
export const Index = observer(() => {
  const { state: {
    locale,
  } } = userService;

  return (
    <ConfigProvider
      locale={locale === 'zhCN' ? zhCN : undefined}
    >
      <Layout className="min-h-screen">
        <BrowserRouter>
          <Switch>
            <Route path="/login" exact>
              <ProjectRoute key={loginPage.id} {...loginPage} />
            </Route>
            <Route path="/login/more" exact>
              <ProjectRoute key={listPage.id} {...listPage} />
            </Route>
            <Route path="/login/more/details" exact>
              <ProjectRoute key={detailsPage.id} {...detailsPage} />
            </Route>

            <Route path="*">
              <MainLayout />
            </Route>
          </Switch>
        </BrowserRouter>
      </Layout>
    </ConfigProvider>
  );
});

export const App = hot(() => <Index />);
